<template>
  <div class="" :style="{
    height: '100%',
    '--imgw': getscalepx(1),
    '--imgh': getscalepx(3),
    '--imgr': getscalepx(-13),
    '--imgt': getscalepx(-5),
    '--imgp': getscalepx(5),
  }">
    <zzdatatable :header="header" :datalist="datalist" :coltype="''"/>
  </div>
</template>
<script>

import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from "@/utils/requestdp";
import qs from 'qs';

export default {
  name: "zzbpdatatable2",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      pids: [],
      tableData: []
    };
  },
  computed: {},
  watch: {},
  created() {
    
  },
  mounted() {
    let unitcolor = "#56C5FA";
    this.header = [
      {
        name: `<img class="img" src="/configuration/2d/bushuijiankong.png" />`,
        flex: 10,
      },
      {
        name: `<span class="head">供压</span><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 10,
      },
      {
        name: `<span class="head">回压</span><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 10,
      },
      {
        name: `<span class="head">流量</span><span style="color: ${unitcolor};">(T/h)</span>`,
        flex: 10,
      },
      {
        name: `<span class="head">累计补水量</span><span style="color: ${unitcolor};">(T)</span>`,
        flex: 10,
      },
    ];
    this.header = this.header.map((item) => {
      item.name = "<div>" + item.name + "</div>";
      return item;
    });
    this.loadData();
    this.interval = setInterval(() => {
      this.loadData();
    }, this.$root.setting.data.interval)
  },
  methods: {
    loadData() {
      let aaa = [];
      this.nameList = [];
      this.pids = [];
      axios.get('/bigScreen/bigScreen').then(res => {
        // let data = res.data[13].attrValue.split(',');
        let data = res.data.filter(v => v.attrName === 'connect_pids')[0].attrValue.split(',');
        data.forEach(v => {
          this.pids.push(v.split('@@')[1])
          this.nameList.push({
            pid: v.split('@@')[1],
            name: `<span class="name">${v.split('@@')[2]}</span>`
          })
        })
        let queryJson = {
          queries: [
            {
              metric: "pid,name,m_009q,m_006p,m_007p,m_012q",
              schema: "monitor"
            }
          ],
          search: "ctype=1&pid=" + this.pids.join(','),
          // search: "ctype=1",
          table: "connector",
          modelColumn: "ctype",
          type: "lastest"
        };
        axios.post("/open/queryDb", queryJson).then(res => {
          if (res.code === 200) {
            this.tableData = res.data;
            this.nameList.forEach((v, i) => {
              this.tableData.forEach(v2 => {
                if (v.pid == v2.pid) {
                  this.nameList[i]['m_006p'] = v2['m_006p'] === undefined || v2['m_006p'] === null ? `<span class="default">--</span>` : `<span class="default">${v2['m_006p']}</span>`;
                  this.nameList[i]['m_007p'] = v2['m_007p'] === undefined || v2['m_007p'] === null ? `<span class="default">--</span>` : `<span class="default">${v2['m_007p']}</span>`;
                  this.nameList[i]['m_009q'] = v2['m_009q'] === undefined || v2['m_009q'] === null ? `<span class="default">--</span>` : `<span class="default">${v2['m_009q']}</span>`;
                  this.nameList[i]['m_012q'] = v2['m_012q'] === undefined || v2['m_012q'] === null ? `<span class="default">--</span>` : `<span class="default">${v2['m_012q']}</span>`;
                }
              })
              if (!('m_006p' in this.nameList[i])) {
                this.nameList[i]['m_006p'] = `<span class="default">--</span>`;
                this.nameList[i]['m_007p'] = `<span class="default">--</span>`;
                this.nameList[i]['m_009q'] = `<span class="default">--</span>`;
                this.nameList[i]['m_012q'] = `<span class="default">--</span>`;
              }
            })
            aaa = this.nameList.map(v => Object.values(v).splice(1))
            this.datalist = aaa;
          } else {
            this.datalist = [];
          }
          this.$nextTick(() => {
          document.querySelector('.img').style.width = this.getscalepx(80);
          let defaultList = document.querySelectorAll('.default');
          let name = document.querySelectorAll('.name');
          let head = document.querySelectorAll('.head');
          defaultList.forEach(v => {
            v.style.fontSize = this.getscalepx(12);
          })
          name.forEach(v => {
            v.style.fontSize = this.getscalepx(10);
            v.style.marginTop = this.getscalepx(5);
            v.parentNode.style.width = '100%';
            v.parentNode.style.textAlign = 'left';
            v.parentNode.style.paddingLeft = this.getscalepx(20);
          })
          head.forEach(v => {
            v.style.fontSize = this.getscalepx(10);
            v.style.marginTop = this.getscalepx(5);
          })
        })
        });
      })
    }
  },
  destroyed() {
    clearInterval(this.interval)
  }
};
</script>
<style lang='scss'>
.default {
  color: #E1EBF2;
}
.head {
  color: #fff;
}
</style>